<template>
	<div class="ai-loading-overlay" v-if="visible">
		<div class="loading-content">
			<img :src="logoImg" alt="Loading" class="loading-logo" />
			<div class="loading-text">{{ text || '正在处理中...' }}</div>
			<a-progress :percent="percent" :show-info="false" stroke-color="#3b82f6" v-if="showProgress" />
		</div>
	</div>
</template>

<script setup lang="ts">
import { withDefaults } from 'vue'
import logoImg from '@/assets/logo.png'

interface Props {
	visible?: boolean
	text?: string
	percent?: number
	showProgress?: boolean
}

withDefaults(defineProps<Props>(), {
	visible: true,
	text: '正在处理中...',
	percent: 0,
	showProgress: false,
})
</script>

<style scoped lang="scss">
.ai-loading-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;

	.loading-content {
		text-align: center;
		padding: 40px;

		.loading-logo {
			width: 80px;
			height: 80px;
			object-fit: contain;
			animation: spin 2s linear infinite;
			margin-bottom: 20px;
		}

		.loading-text {
			font-size: 16px;
			color: #666;
			font-weight: 500;
			margin-bottom: 16px;
			animation: pulse 1.5s ease-in-out infinite;
		}

		:deep(.ant-progress) {
			width: 200px;

			.ant-progress-bg {
				border-radius: 4px;
			}
		}
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.7;
	}
}
</style>
